<template>
	<div class="app-container">
		<span style="display: inline-block;margin-bottom:10px;">课程列表</span>
		<!--查询表单-->
		<el-form :inline="true" class="demo-form-inline">
			<el-form-item>
				<el-input v-model="courseQuery.title" placeholder="课程名称" />
			</el-form-item>

			<el-form-item>
				<el-select
					v-model="courseQuery.status"
					clearable
					placeholder="课程状态"
				>
					<el-option value="Normal" label="已发布" />
					<el-option value="Draft" label="未发布" />
				</el-select>
			</el-form-item>

			<el-form-item>
				<el-select v-model="courseQuery.teacherId" placeholder="请选择">
					<el-option
						v-for="teacher in teacherList"
						:key="teacher.id"
						:label="teacher.name"
						:value="teacher.id"
					/>
				</el-select>
			</el-form-item>

			<el-form-item>
				<el-select
					v-model="courseQuery.subjectParentId"
					placeholder="请选择一级分类"
					@change="subjectLevelOneChanged"
				>
					<el-option
						v-for="subject in subjectOneList"
						:key="subject.id"
						:label="subject.title"
						:value="subject.id"
					/>
				</el-select>

				<!-- 二级分类 -->
				<el-select
					v-model="courseQuery.subjectId"
					placeholder="请先选择一级分类"
          @change="$forceUpdate()"
				>
					<el-option
						v-for="subject in subjectTwoList"
						:key="subject.id"
						:label="subject.title"
						:value="subject.id"
					/>
				</el-select>
			</el-form-item>

			<el-button type="primary" icon="el-icon-search" @click="getList()"
				>查询</el-button
			>
			<el-button type="default" @click="resetData()">清空</el-button>
		</el-form>

		<!-- 表格 -->
		<el-table :data="list" border fit highlight-current-row>
			<el-table-column label="序号" width="70" align="center">
				<template slot-scope="scope">{{
					(courseQuery.pageNum - 1) * courseQuery.pageSize + scope.$index + 1
				}}</template>
			</el-table-column>

			<el-table-column prop="title" label="课程名称" />

			<el-table-column label="课程状态" width="80">
				<template slot-scope="scope">{{
					scope.row.status === "Normal" ? "已发布" : "未发布"
				}}</template>
			</el-table-column>

      <el-table-column label="课程讲师" width="80">
				<template slot-scope="scope">
					<span>{{getName(scope.row,"teacherId")}}</span>
				</template>
			</el-table-column>

      <el-table-column label="课程专业" width="100">
				<template slot-scope="scope">
					<span>{{getName(scope.row,"subjectParentId")}}</span>
				</template>
			</el-table-column>

      <el-table-column label="课程子专业" width="100">
				<template slot-scope="scope">
					<span>{{getName(scope.row,"subjectId")}}</span>
				</template>
			</el-table-column>

			<el-table-column prop="lessonNum" label="课时数" width="80" />

			<el-table-column prop="gmtCreate" label="添加时间" width="160" />

			<el-table-column prop="viewCount" label="浏览数量" width="160" />

			<el-table-column label="操作" width="400" align="center">
				<template slot-scope="scope">
					<router-link :to="'/course/info/' + scope.row.id">
						<el-button type="primary" size="mini" icon="el-icon-edit"
							>编辑课程基本信息</el-button
						>
					</router-link>
					<router-link :to="'/course/chapter/' + scope.row.id">
						<el-button type="primary" size="mini" icon="el-icon-edit"
							>编辑课程大纲息</el-button
						>
					</router-link>
					<el-button
						type="danger"
						size="mini"
						icon="el-icon-delete"
						@click="removeCourseBy(scope.row.id)"
						>删除</el-button
					>
				</template>
			</el-table-column>
		</el-table>

		<!-- 分页 -->
		<el-pagination
			:current-page="courseQuery.pageNum"
			:page-size="courseQuery.pageSize"
			:total="total"
			style="padding: 30px 0; text-align: center;"
			layout="total, prev, pager, next, jumper"
			@current-change="getList"
		/>
	</div>
</template>
<script>
//引入调用course.js文件
import course from "@/api/edu/course";
import subject from "@/api/edu/subject";

export default {
	//写核心代码位置
	// data:{
	// },
	data() {
		//定义变量和初始值
		return {
			list: null, //查询之后接口返回集合
			total: 0, //总记录数
			courseQuery: { pageNum: 1, pageSize: 10, status: "Normal" }, //条件封装对象
			teacherList: [], //封装所有讲师
			subjectOneList: [], //封装一级分类
			subjectTwoList: [] //封装二级分类
		};
	},
	created() {
		//页面渲染之前执行，一般调用methods定义的方法
		//调用
		this.getList();
		//初始化所有讲师
		this.getListTeacher();
		//初始化一级分类
		this.getOneSubject();
	},
	methods: {
    getName(row,str){
      let data;
      if(str=="teacherId"){
        data=this.teacherList.find(v=>v.id==row[str]);
        return data?data.name:"-";
      }else if(str=="subjectParentId"){
        // console.log(this.subjectOneList);
        data=this.subjectOneList.find(v=>v.id==row[str]);
        return data?data.title:"-";
      }else{
        let dataOne=this.subjectOneList.find(v=>v.id==row.subjectParentId);
        if(dataOne){
          data=dataOne.children.find(v=>v.id==row[str]);
        }
        return data?data.title:"-";
      }
    },
		//查询所有的讲师
		getListTeacher() {
			course.getListTeacher().then(response => {
				this.teacherList = response.data;
			});
		},
		//查询所有的一级分类
		getOneSubject() {
			subject.getSubjectList().then(response => {
				this.subjectOneList = response.data;
			});
		},
		//点击某个一级分类，触发change，显示对应二级分类
		subjectLevelOneChanged(value) {
			//value就是一级分类id值
			//遍历所有的分类，包含一级和二级
			for (var i = 0; i < this.subjectOneList.length; i++) {
				//每个一级分类
				var oneSubject = this.subjectOneList[i];
				//判断：所有一级分类id 和 点击一级分类id是否一样
				if (value === oneSubject.id) {
					//从一级分类获取里面所有的二级分类
					this.subjectTwoList = oneSubject.children;
					//把二级分类id值清空
					this.courseQuery.subjectId = "";
				}
			}
		},

		removeCourseBy(id) {
			this.$confirm("此操作将永久删除讲师记录, 是否继续?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			}).then(() => {
				//点击确定，执行then方法
				//调用删除的方法
				course.removeCourse(id).then(response => {
					//删除成功
					//提示信息
					this.$message({
						type: "success",
						message: "删除成功!"
					});
					//回到列表页面
					this.getList();
				});
			}); //点击取消，执行catch方法
		},
		//创建具体的方法，调用teacher.js定义的方法
		//讲师列表的方法
		getList(page = 1) {
			this.courseQuery.pageNum = page;
			course
				.getCourseListPage(this.courseQuery)
				.then(response => {
					//请求成功，response接口返回的数据
					this.list = response.data.list;
					this.total = response.data.total;
				})
				.catch(error => {
					console.log(error);
				}); //请求失败
		},
		resetData() {
			//清空的方法
			//表单输入项数据清空
			this.courseQuery = { pageNum: 1, pageSize: 10, status: "Normal" };
			//查询所有讲师数据
			this.getList();
		}
	}
};
</script>
